
    <div>
      <Navbar [icon]="icon" (onLeftClick)="onDockedChange($event)">Docked in document</Navbar>
      <Drawer
        class="my-drawer"
        [ngStyle]="{ minHeight: this.height + 'px' }"
        [contentStyle]="{ color: '#A6A6A6', textAlign: 'center', paddingTop: '42px' }"
        [sidebarStyle]="{ border: '1px solid #ddd' }"
        [sidebar]="sidebar"
        [enableDragHandle]="false"
        [docked]="this.state.docked"
        (onOpenChange)="onDockedChange($event)"
      >
        Click upper-left corner
      </Drawer>
    </div>

    <ng-template #icon>
      <Icon type="ellipsis"></Icon>
    </ng-template>

    <ng-template #sidebar>
      <List>
        <ListItem [multipleLine]="true" [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'">
          Category
        </ListItem>
        <ListItem
          *ngFor="let num of this.nums; let i = index"
          [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'"
        >
          Category{{ i + 1 }}
        </ListItem>
      </List>
    </ng-template>
  